<template>
    <div>
        <div>{{content}}</div>
        <hr>
        <button @click="content = '子组件'">子组件按钮</button><span>{{content}}</span>
        <!-- 单项数据流：父组件的内容变了，子组件会影响，但子组件的内容变了，父组件不会受到影响（引用数据类型除外） -->

        <hr>
        <button @click="contentObject.text = '引用类型子组件'">引用类型子组件按钮</button><span>{{contentObject}}</span>
    </div>
</template>

<script>
    export default {
        props:{
            content:{
                type:String
            },
            contentObject:{
                type:Object
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>